import React from "react";
import { useNavigate } from "react-router";
import gird1 from "./images/gird1.jpg";
import gird2 from "./images/gird2.jpg";
import gird3 from "./images/gird3.jpg";
import gird4 from "./images/gird4.jpg";
import gird5 from "./images/gird5.jpg";
import gird6 from "./images/gird6.jpg";
const Index: React.FC = () => {
  const navigate = useNavigate();
  return (
    <div style={{ display: "flex", flexWrap: "wrap" }}>
      <div
        style={{
          width: "45vw",
          height: "9vh",
          borderRadius: "2vw",
          background: "#fff",
          display: "flex",
          marginBottom: "1vh",
          marginRight: "2vw",
          marginLeft: "3vw",
        }}
        onClick={() => navigate("/wenzhenjilu")}
      >
        <img
          src={gird1}
          style={{
            width: "8vw",
            height: "5vh",
            marginLeft: "3vw",
            marginTop: "2vh",
          }}
        />
        <p style={{ fontSize: "5.5vw", marginLeft: "3vw", marginTop: "2.5vh" }}>
          在线问诊
        </p>
      </div>
      <div
        style={{
          width: "45vw",
          height: "9vh",
          borderRadius: "2vw",
          background: "#fff",
          display: "flex",
          marginBottom: "1vh",
        }}
        onClick={() => navigate("/jiankang")}
      >
        <img
          src={gird2}
          style={{
            width: "8vw",
            height: "5vh",
            marginLeft: "3vw",
            marginTop: "2vh",
          }}
        />
        <p style={{ fontSize: "5.5vw", marginLeft: "3vw", marginTop: "2.5vh" }}>
          健康档案
        </p>
      </div>
      <div
        style={{
          width: "45vw",
          height: "9vh",
          borderRadius: "2vw",
          background: "#fff",
          display: "flex",
          marginBottom: "1vh",
          marginRight: "2vw",
          marginLeft: "3vw",
        }}
        onClick={() => navigate("/yongyaojianyi")}
      >
        <img
          src={gird3}
          style={{
            width: "8vw",
            height: "5vh",
            marginLeft: "3vw",
            marginTop: "2vh",
          }}
        />
        <p style={{ fontSize: "5.5vw", marginLeft: "3vw", marginTop: "2.5vh" }}>
          用药建议
        </p>
      </div>
      <div
        style={{
          width: "45vw",
          height: "9vh",
          borderRadius: "2vw",
          background: "#fff",
          display: "flex",
          marginBottom: "1vh",
        }}
        onClick={() => navigate("/youxuan")}
      >
        <img
          src={gird4}
          style={{
            width: "8vw",
            height: "5vh",
            marginLeft: "3vw",
            marginTop: "2vh",
          }}
        />
        <p style={{ fontSize: "5.5vw", marginLeft: "3vw", marginTop: "2.5vh" }}>
          优选订单
        </p>
      </div>
      <div
        style={{
          width: "45vw",
          height: "9vh",
          borderRadius: "2vw",
          background: "#fff",
          display: "flex",
          marginBottom: "1vh",
          marginRight: "2vw",
          marginLeft: "3vw",
        }}
        onClick={() => navigate("/mydoctor")}
      >
        <img
          src={gird5}
          style={{
            width: "8vw",
            height: "5vh",
            marginLeft: "3vw",
            marginTop: "2vh",
          }}
        />
        <p style={{ fontSize: "5.5vw", marginLeft: "3vw", marginTop: "2.5vh" }}>
          我的医生
        </p>
      </div>
      <div
        style={{
          width: "45vw",
          height: "9vh",
          borderRadius: "2vw",
          background: "#fff",
          display: "flex",
          marginBottom: "1vh",
        }}
        onClick={() => navigate("/suifang")}
      >
        <img
          src={gird6}
          style={{
            width: "8vw",
            height: "5vh",
            marginLeft: "3vw",
            marginTop: "2vh",
          }}
        />
        <p style={{ fontSize: "5.5vw", marginLeft: "3vw", marginTop: "2.5vh" }}>
          随访计划
        </p>
      </div>
    </div>
  );
};

export default Index;
